export default {
  // el {element} 当前元素
  componentUpdated (el, binding, vnode) {
    let timer = null
    const curStyle = window.getComputedStyle(el, '') // 获取当前元素的style
    const textSpan = document.createElement('span') // 创建一个容器来记录文字的width
    // 设置新容器的字体样式，确保与当前需要隐藏的样式相同
    // 设置新容器的文字
    textSpan.innerText = el.innerText
    textSpan.style.fontSize = curStyle.fontSize
    textSpan.style.fontWeight = curStyle.fontWeight
    textSpan.style.fontFamily = curStyle.fontFamily
    // 将容器插入body，如果不插入，offsetWidth为0
    el.appendChild(textSpan)

    // 如果字体元素大于当前元素，则需要隐藏
    if (textSpan.offsetWidth > el.offsetWidth) {
      // 给当前元素设置超出隐藏
      el.style.overflow = 'hidden'
      el.style.textOverflow = 'ellipsis'
      el.style.whiteSpace = 'nowrap'
      el.style.display = 'inline-block'
      // 鼠标移入
      el.onmouseenter = function (e) {
        // 创建浮层元素并设置样式
        const vcTooltipDom = document.createElement('div')
        const vcArrow = document.createElement('div')
        vcTooltipDom.style.cssText = `
        height: auto;
        transform-origin: center bottom;
        position:absolute;
        bottom: 50px;
        transform: translateX(-50%);
        left: 50%;
        background: rgba(0, 0 , 0, .8);
        color:#fff;
        border-radius:5px;
        padding:10px;
        display:inline-block;
        font-size:14px;
        z-index:19999;
        line-height:1;`
        vcArrow.style.cssText = `
        width: 0;
        height: 0;
        border: 6px solid rgba(0, 0 , 0, .8);
        position: absolute;
        bottom: -12px;
        transform: translateX(-50%);
        left: 50%;
        display: block;
        z-index: 39999;
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-right-color: transparent;`
        // 设置id方便寻找
        vcTooltipDom.setAttribute('id', 'vc-tooltip')
        // 将浮层插入到body中
        el.appendChild(vcTooltipDom)
        // el.appendChild(vcArrow);
        // 浮层中的文字
        timer = setTimeout(() => {
          document.querySelector('#vc-tooltip').appendChild(vcArrow)
          clearInterval(timer)
        }, 0)
        document.getElementById('vc-tooltip').innerText = el.innerText
      }
      // 鼠标移出
      el.onmouseleave = function () {
        // 找到浮层元素并移出
        const vcTooltipDom = document.getElementById('vc-tooltip')
        vcTooltipDom && el.removeChild(vcTooltipDom)
      }
    }
    // 记得移除刚刚创建的记录文字的容器
    el.removeChild(textSpan)
  },
  // 指令与元素解绑时
  unbind (el) {
    // 找到浮层元素并移除
    const vcTooltipDom = document.getElementById('vc-tooltip')
    vcTooltipDom && el.removeChild(vcTooltipDom)
  }
}
